<template>
    <div class="con_store_main">
        <!-- 禁用操作弹窗 -->
        <el-dialog title="提示" :visible.sync="disBox" width="30%">
            <span>确定执行封禁操作？，确定则输入原因</span>
            <el-input v-model="disAbledForm.disNote" placeholder="输入原因"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="disBox = false">取 消</el-button>
                <el-button type="primary" @click="ConfirmDisabled">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 禁用操作弹窗 -->
        <el-dialog title="提示" :visible.sync="box" width="30%">
            <span>确定执行解禁操作？，确定则输入原因</span>
            <el-input v-model="ableForm.note" placeholder="输入原因"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="box = false">取 消</el-button>
                <el-button type="primary" @click="confirmAble">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 店铺表格 -->
        <el-form v-show="isStoreTable" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="店铺名称">
                <el-input v-model="formInline.storeName" placeholder="输入店铺名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="findData" type="primary" icon="el-icon-search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="openAction" type="primary" icon="el-icon-search">操作记录</el-button>
            </el-form-item>
        </el-form>
        <el-table v-if="isStoreTable" class="table" :data="tableData" style="width: 100%" v-loading="loading"
            :default-sort="{ prop: 'index', order: 'descending' }">
            <el-table-column type="index" label="序号" sortable width="100">
            </el-table-column>
            <el-table-column prop="storeName" label="店铺名称" width="120">
            </el-table-column>
            <el-table-column prop="storeIntroduction" label="店铺简介" width="140">
            </el-table-column>
            <el-table-column prop="storeAddress" label="店铺地址">
            </el-table-column>
            <el-table-column class="el-status" prop="status" label="营业状态">
                <template slot-scope="scope">
                    <div class="ic-status">
                        <svg style="padding-top: 4px;padding-right: 2px;" v-if="scope.row.status === '正常营业'"
                            t="1718505107697" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2477" width="16" height="16">
                            <path
                                d="M10.53940227 513.08802072c0 277.51113799 224.97261203 502.48276716 502.48276716 502.48276717s502.48276716-224.97261203 502.48276715-502.48276717c0-277.51113799-224.97261203-502.48276716-502.48276715-502.48276715-277.51113799 0-502.48276716 224.97261203-502.48276716 502.48276715z"
                                fill="#23f169" p-id="2478"></path>
                        </svg>
                        <svg style="padding-top: 4px;padding-right: 2px;"
                            v-if="scope.row.status === '暂停营业' || scope.row.status === '禁用中'" t="1718505107697"
                            class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            p-id="2477" width="16" height="16">
                            <path
                                d="M10.53940227 513.08802072c0 277.51113799 224.97261203 502.48276716 502.48276716 502.48276717s502.48276716-224.97261203 502.48276715-502.48276717c0-277.51113799-224.97261203-502.48276716-502.48276715-502.48276715-277.51113799 0-502.48276716 224.97261203-502.48276716 502.48276715z"
                                fill="#f47c6c" p-id="2478" data-spm-anchor-id="a313x.search_index.0.i4.7b9f3a817B3mtJ"
                                class=""></path>
                        </svg>
                        {{ scope.row.status }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="disabledStore(scope.row)">禁用</el-button>
                    <el-button type="text" size="small" @click="ableStore(scope.row)">解禁</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 操作类型表格 -->
        <el-form v-show="!isStoreTable" :inline="true" class="demo-form-inline">
            <el-form-item label="店铺名">
                <el-input v-model="adminFormInline.storeName" placeholder="输入店铺名称"></el-input>
            </el-form-item>
            <el-form-item label="操作类型">
                <el-input v-model="adminFormInline.actionType" placeholder="输入操作类型"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="findActionData" type="primary" icon="el-icon-search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="goBack" type="primary" icon="el-icon-search">返回</el-button>
            </el-form-item>
        </el-form>
        <el-table v-show="!isStoreTable" class="table" :data="actionTableData" style="width: 100%" v-loading="loading"
            :default-sort="{ prop: 'index', order: 'descending' }">
            <el-table-column type="index" label="序号" sortable width="100">
            </el-table-column>
            <el-table-column prop="storeName" label="店铺名" width="160">
            </el-table-column>
            <el-table-column prop="storeIntroduction" label="店铺简介" width="160">
            </el-table-column>
            <el-table-column prop="storeAddress" label="店铺地址">
            </el-table-column>
            <el-table-column prop="note" label="原因">
            </el-table-column>
            <el-table-column class="el-status" prop="actionType" label="操作类型">
                <template slot-scope="scope">
                    <div class="ic-status">
                        <svg style="padding-top: 4px;padding-right: 2px;" v-if="scope.row.actionType === '解禁'"
                            t="1718505107697" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2477" width="16" height="16">
                            <path
                                d="M10.53940227 513.08802072c0 277.51113799 224.97261203 502.48276716 502.48276716 502.48276717s502.48276716-224.97261203 502.48276715-502.48276717c0-277.51113799-224.97261203-502.48276716-502.48276715-502.48276715-277.51113799 0-502.48276716 224.97261203-502.48276716 502.48276715z"
                                fill="#23f169" p-id="2478"></path>
                        </svg>
                        <svg style="padding-top: 4px;padding-right: 2px;"
                            v-if="scope.row.actionType === '暂停营业' || scope.row.actionType === '禁用中'" t="1718505107697"
                            class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            p-id="2477" width="16" height="16">
                            <path
                                d="M10.53940227 513.08802072c0 277.51113799 224.97261203 502.48276716 502.48276716 502.48276717s502.48276716-224.97261203 502.48276715-502.48276717c0-277.51113799-224.97261203-502.48276716-502.48276715-502.48276715-277.51113799 0-502.48276716 224.97261203-502.48276716 502.48276715z"
                                fill="#f47c6c" p-id="2478" data-spm-anchor-id="a313x.search_index.0.i4.7b9f3a817B3mtJ"
                                class=""></path>
                        </svg>
                        {{ scope.row.actionType }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="actionDate" label="操作时间">
            </el-table-column>

        </el-table>
        <el-pagination v-if="isStoreTable" style="margin: auto;margin-top: 8px;" :hide-on-single-page="value"
            :current-page.sync="currentPage" :page-size="6" :pager-count="11" layout="prev, pager, next"
            :total="this.total" @current-change="handleSizeChange">
        </el-pagination>
        <el-pagination v-else style="margin: auto;margin-top: 8px;" :hide-on-single-page="value"
            :current-page.sync="actionCurrentPage" :page-size="6" :pager-count="11" layout="prev, pager, next"
            :total="this.actionTotal" @current-change="handleSizeChange">
        </el-pagination>
    </div>
</template>
<script>
import { request } from "@/network/request/request";
export default {
    mounted() {
        this.findActionData();
        this.findData();
    },
    data() {
        return {
            loading: false,
            currentPage: 1, // 当前页码  
            actionCurrentPage: 1,
            pageSize: 6, // 每页显示的记录数  
            total: 0, // 总个数  //默认设置 0
            actionTotal: 0, // 总个数  //默认设置 0
            tableData: [],
            disBox: false,
            box: false,
            disAbledForm: {
                disNote: '',
                actionType: "禁用中",
                adminId: 0,
                storedId: 0,
            },
            ableForm: {
                note: '',
                actionType: "解禁",
                adminId: 0,
                storedId: 0,
            },
            note: '',
            storeActionData: [],
            value: false,
            isStoreTable: true,
            actionTableData: [],
            formInline: {
                storeName: '',
            },
            adminFormInline: {
                storeName: '',
                actionType: '',
            },
        }
    },
    methods: {
        time() {
            this.loading = true;
            setTimeout(() => {
                this.loading = false;
            }, 600);
        },
        openAction() {
            this.isStoreTable = false;
        },
        goBack() {
            this.isStoreTable = true;
            this.findData();
        },
        handleSizeChange() {
            this.findData();
            this.findActionData();
        },
        async confirmAble() {
            const config = {
                url: 'api/admin/store',
                method: "put",
                data: {
                    account: localStorage.getItem("account"),
                    storeId: this.ableForm.storeId,
                    actionType: this.ableForm.actionType,
                    note: this.ableForm.note,
                }
            }
            const res = await request(config);
            if (res.data.code === 1) {
                this.$message.success("修改成功");
                this.findData();
                this.findActionData();
                this.box = false;
            }

        },
        async ConfirmDisabled() {
            const config = {
                url: 'api/admin/store',
                method: "put",
                data: {
                    account: localStorage.getItem("account"),
                    storeId: this.disAbledForm.storeId,
                    actionType: this.disAbledForm.actionType,
                    note: this.disAbledForm.disNote,
                }
            }
            const res = await request(config);
            if (res.data.code === 1) {
                this.$message.success("修改成功");
                this.findData();
                this.findActionData();
                this.disBox = false;
            }
        },
        disabledStore(row) {
            if (row.status === '禁用中') {
                this.$message.error("已经禁用");
            } else {
                this.disBox = true;
                console.log(row);
                this.disAbledForm.storeId = row.storeId;
            }
        },
        ableStore(row) {
            if (row.status === '正常营业' || row.status === '暂停营业') {
                this.$message.error("处于正常状态无需解禁");
            } else {
                this.box = true;
                console.log(row);
                this.ableForm.storeId = row.storeId;
            }

        },
        async findActionData() {
            this.time();
            const params = {
                storeName: this.adminFormInline.storeName,
                actionType: this.adminFormInline.actionType,
                currentPage: this.actionCurrentPage /* 当前页码 */,
                pageSize: this.pageSize /* 页码大小 */,
                account: localStorage.getItem("account"),
            };
            const config = {
                url: "api/admin/store",
                method: "get",
                params: params,
            };
            const res = await request(config);
            if (res.data.code === 1) {
                this.actionTotal = res.data.data.total; /* 得到数据的总数 */
                this.actionTableData = res.data.data.pageList; /* 得到数据 */
            } else {
                this.$message.error("查询失败")
            }
        },
        async findData() {
            const params = {
                currentPage: this.currentPage,/* 当前页码 */
                pageSize: this.pageSize,/* 页码大小 */
                storeName: this.formInline.storeName,/* 店铺名 */
            }
            const config = {
                url: "api/user/store",
                method: "get",
                params: params,
            }
            const res = await request(config);
            if (res.data.code === 1) {
                this.total = res.data.data.total;/* 得到数据的总数 */
                this.tableData = res.data.data.pageList;/* 得到数据 */

            } else {
                this.$message.error("查询失败")
            }

        },
    },
}; 
</script>
<style scoped>
.con_store_main {
    height: 498px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}
</style>
